<template>
    <div class="container">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>动态记录</el-breadcrumb-item>
                <el-breadcrumb-item>动态列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 20px;padding: 20px;background-color: #fff;">
            <div style="display: flex;align-items: center;flex-wrap: wrap;">
                <div style="display: flex;align-items: center; margin-right: 30px;">
                    <el-input style="width: 300px;" clearable v-model="keyword" placeholder="请输入内容"></el-input>
                    <el-button type="primary" size="medium" style="margin-left: 10px;" @click="SeachList">搜索</el-button>
                </div>
                <div>
                    <el-date-picker style="width: 420px;" @change="PickerChange" v-model="value2" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                    <el-button type="primary" size="medium" style="margin-left: 10px;" @click="Reset">重置</el-button>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
                <Table :columns="listfields" :data-source="listData" :bordered="true" :pagination="false" :loading="loading">
                    <div slot="action" slot-scope="row, index">
                        <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                            <el-button type="primary" size="mini" @click="EditItem(index)">转发记录</el-button>
                            <el-button type="primary" size="mini" @click="toSupport(index)">点赞记录</el-button>
                            <el-button type="primary" size="mini" @click="toComment(index)">评论记录</el-button>
                        </div>
                    </div>
                </Table>
                <pagination :total="total" v-model="page" :pageSize.sync="pagesize" :showQuickJumper="true" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import pagination from '@/common/pagination.vue'
    import Table from 'ant-design-vue/lib/table';
    import modal from 'ant-design-vue/lib/modal';
    import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    export default {
        name: 'dynamicList',
        components: {
            pagination,
            Table,
            modal
        },
        data() {
            return {
                listData: [],
                selectedRowKeys: [],
                total: 0, //定义初始有多少条数据
                page: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: '',
                keyword: '',
                start_date: '',
                end_date: '',
                loading:false
            };
        },
        computed: {
            ...mapState({
                listfields: state => state.dynamic.fields,
            }),
        },
        watch: {},
        created() {},
        mounted() {
            this.GetFields()
            this.getList()
        },
        methods: {
            ...mapActions({
                GetFields: 'dynamic/GetFields',
            }),
            PickerChange(e) {
                // console.log(e);
                if (e != null) {
                    this.start_date = e[0]
                    this.end_date = e[1]
                    this.getList()
                } else {
                    this.start_date = ''
                    this.end_date = ''
                    this.value2 = ''
                    this.getList()
                }
            },
            SeachList() {
                this.getList()
            },
            Reset() {
                this.keyword = ''
                this.start_date = ''
                this.end_date = ''
                this.value2 = ''
                this.getList()
            },
            EditItem(row) {
                const id = row.id;
                this.$router.push({ name: 'dynamicDetaile', query: { id } });
            },
            // 进入点赞记录
            toSupport(row){
              const id = row.id;
              this.$router.push({ name: 'dynamicSupport', query: { id } });
            },
            // 进入评论记录
            toComment(row){
              const id = row.id;
              this.$router.push({ name: 'dynamicComment', query: { id } });
            },
            getList() {
                var that = this
                var params = {
                    keyword: that.keyword,
                    start_date: that.start_date,
                    end_date: that.end_date,
                    page: that.page,
                    pagesize: that.pagesize,
                }
                that.$http.post('/api/root/dt/Trend/index', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res.data);
                        var data = res.data.list
                        if (data.length > 0) {
                            data.forEach((item, index) => {
                                item.key = item.id
                                item.create_time = this.$moment(item.create_time * 1000).format('yyyy-MM-DD HH:mm')
                            })
                            that.total = res.data.total
                            that.listData = data
                            // console.log(res.data);
                        } else {
                            that.listData = []
                        }
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.page = pageno;
                this.pagesize = pagesize;
                this.getList()
            },
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.page = current;
                this.pagesize = size;
                this.getList()
            },
            onSelectChange(selectedRowKeys) {
                // console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
            },
        },
    };
</script>
<style lang="less" scoped>
    .container {
        height: 100%;
        background-color: #f5f5f5;
    }

    .table-breadcrumb {
        height: 6%;
        min-height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }
</style>